<!--
 * @Author: early-autumn
 * @Date: 2020-06-03 19:34:15
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-17 15:35:45
-->
<template>
  <el-dialog title="分配缴费金额" :visible="visible" @close="handleCancel">
    <el-table border show-summary :summary-method="getSummaries" :data="items">
      <el-table-column
        label="项目名称"
        align="center"
        prop="itemName"
      ></el-table-column>
      <el-table-column
        label="医生"
        align="center"
        prop="doctor"
      ></el-table-column>
      <el-table-column
        label="折后金额"
        align="center"
        prop="discountPrice"
      ></el-table-column>
      <el-table-column
        label="储值金划扣金额"
        align="center"
        prop="petCardAmount"
      ></el-table-column>
      <el-table-column label="分配缴费金额" align="center">
        <el-input
          slot-scope="scope"
          :value="scope.row.payAmount"
          @input="payAmountInput($event, scope.row)"
          @blur="handlePayAmount($event.target.value, scope.row)"
        ></el-input>
      </el-table-column>
      <el-table-column
        label="欠费金额"
        align="center"
        prop="owingPrice"
      ></el-table-column>
    </el-table>
    <el-form inline class="mt20">
      <el-row>
        <el-col :span="8">
          <el-form-item label="应缴金额：">
            ¥ {{ receivablePriceTotal }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="缴费金额：">¥ {{ payAmount }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="欠费金额：" style="color: red">
            ¥ {{ owingPriceTotal }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template slot="footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button
        type="primary"
        :disabled="payAmountComputed !== payAmount"
        @click="handleSubmit"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'PayAllocation',
  data() {
    return {
      visible: false,
      tableData: [],
      receivablePriceTotal: '0.00',
      payAmount: '0.00',
      owingPriceTotal: '0.00',
    }
  },
  computed: {
    items() {
      return this.tableData.filter((i) => i.receivablePrice !== '0.00')
    },
    payAmountComputed() {
      return this.items
        .reduce((total, { payAmount }) => total + +payAmount, 0)
        .toFixed(2)
    },
    owingPriceComputed() {
      return this.items
        .reduce((total, { owingPrice }) => total + +owingPrice, 0)
        .toFixed(2)
    },
  },
  methods: {
    open(e) {
      this.visible = true
      this.tableData = e.tableData.map((item) => {
        return {
          ...item,
          payAmount: +item.payAmount,
        }
      })
      this.receivablePriceTotal = e.receivablePriceTotal
      this.payAmount = (+e.payAmount).toFixed(2)
      this.owingPriceTotal = e.owingPriceTotal
    },
    handleCancel() {
      this.visible = false
    },
    handleSubmit() {
      this.handleCancel()
      this.$emit('ok', this.tableData)
    },
    getSummaries({ columns }) {
      const sums = []
      columns.forEach((column, index) => {
        switch (column.label) {
          case '分配缴费金额':
            sums[index] = `${this.payAmountComputed}元`
            break
          case '欠费金额':
            sums[index] = `${this.owingPriceComputed}元`
            break
          default:
            sums[index] = ''
        }
      })
      return sums
    },
    payAmountInput(e, project) {
      if (isNaN(e)) {
        return
      }
      project.payAmount = e || 0
    },
    handlePayAmount(e, project) {
      let newPayAmount = +e
      const oldPayAmount = +project.payAmount
      const oldPayAmountComputed = +this.payAmountComputed
      const newPayAmountComputed =
        oldPayAmountComputed - oldPayAmount + newPayAmount
      if (newPayAmountComputed > +this.payAmount) {
        newPayAmount = Math.min(
          +this.payAmount - (oldPayAmountComputed - oldPayAmount),
          +project.receivablePrice
        )
      }
      project.payAmount = newPayAmount
      project.owingPrice = (
        +project.receivablePrice - +project.payAmount
      ).toFixed(2)
    },
  },
}
</script>
